<template>
  <div class="box">
    <div class="base">基本信息</div>
    <div>
      <div class="title">店铺名称</div>
      <div>
        <u-input disabled v-model="storeData.storeName" :custom-style="inputStyle"> </u-input>
      </div>
    </div>
    <div>
      <div class="title">店铺地址</div>
      <div>
        <u-input v-model="storeData.storeAddressPath" :custom-style="inputStyle"> </u-input>
      </div>
    </div>
    <div>
      <div class="title">详细地址</div>
      <div>
        <u-input v-model="storeData.storeAddressDetail" :custom-style="inputStyle"> </u-input>
      </div>
    </div>

    <div>
      <div class="title">店铺LOGO</div>
      <div>
        <u-upload :file-list="fileList" 
		:header=" { accessToken: storage.getAccessToken() }" 
		:action="action" 
		width="200" 
		@on-uploaded="onUploaded" 
		@on-progress="progress" 
		:max-count="1" 
		:show-progress="false"
		@on-remove="onRemove"
		></u-upload>
      </div>
    </div>
    <u-button @click="submit" :loading="loading">{{loading?'图片上传中...':"保存/修改"}}</u-button>
  </div>
</template>

<script>
import storage from "@/utils/storage.js";
import { saveShopInfo } from "@/api/shops";
import { upload } from "@/api/common.js";
import { getUserInfo } from "@/api/login";
import { getShopInfo } from "@/api/shops";
export default {
  data() {
    return {
      storage,
      action: upload, //图片上传数据
      inputStyle: {
        background: "#f7f7f7",
        "padding-left": "20rpx",
        "border-radius": "10rpx",
      },
      loading:false,
      storeData: {},
      fileList: [],
    };
  },
	onLoad() {
		this.init()
	},
  mounted() {},
  methods: {
    onRemove(i){
      this.fileList[i].url=""
      this.storeData.storeLogo=''
    },
	  async init() {
	    let res = await getShopInfo();
	    if (res.data.success) {
			console.log(res.data.result);
			this.storeData = res.data.result;
      if(!this.storeData.storeLogo) return
			this.fileList = [
				{
					url:this.storeData.storeLogo
				}
			]
	    }
	  },
    progress(e){
      if(e.progress==100) return
      this.loading=true
    },
    // 图片上传
    onUploaded(lists) {
      uni.showLoading({
        title:"图片上传中"
      })
      const { result , code , message} = lists[0].response
      if(code === 200){
        uni.hideLoading()
        this.storeData.storeLogo=result
        this.loading=false
      }else{
        uni.showToast({
          title:message,
          icon:"none"
        })
      } 
    },
    async submit() {
      let res = await saveShopInfo(this.storeData);
      if (res.data.success) {
		this.updateUserInfo()
      }
    },
	async updateUserInfo(){
		const user = await getUserInfo()
		if (user.data.success) {
		  /**
		   * 个人信息存储到缓存userInfo中
		   */
		  console.log(user.data.result,"result");
		  storage.setUserInfo(user.data.result);
		  uni.showToast({
		    title: "操作成功!",
		    duration: 2000,
		    icon: "none",
		  });
		  this.fileList = []
		  setTimeout(() => {
		    uni.navigateBack({
		      delta: 1,
		    });
		  }, 500);
		}
	}
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-btn--default{
  background-color: #333;
  height: 35px;
  line-height: 35px;
  color: #fff;
  margin: 40px auto 0 auto;
}
.box {
  padding: 32rpx;
}
.title {
  font-weight: bold;
  margin: 40rpx 0;
}
.base {
  font-size: 38rpx;
  text-align: center;
}
</style>